import React, {useState, useEffect, useCallback} from 'react';
import {postLsCarPassageFindLsCarPassage} from '../../api'
import SelectModules from './SelectModules'
import { ImportAndExportListAll } from './style'
import { Button, message, PageHeader, Table,Image } from 'antd'

/**
 * @description: 车辆进出列表
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-17） 修改离场列表图片不显示问题
 */

const ImportAndExportList = () => {
    const [listData, setListData] = useState([])
    const [paging, setPaging] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [tableLoading, setTableLoading] = useState(true)
    const [selectData, setSelectData] = useState({})
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            setTableLoading(true)
            ;(async () => {
                const {code, msg, data} = await postLsCarPassageFindLsCarPassage(parames)
                if(code === '20000') {
                    setListData(data.records)
                    setPaging({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    })
                    setTableLoading(false)
                }else{
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
        //分页
        const pagination = {
            //是否可以改变pagesize//
            showSizeChanger: true,
            //是否可以快速跳转到某页
            showQuickJumper: true,
            //展示一共有多少条数据//
            showTotal: () => `共${paging.total}条`,
            //每页条数
            pageSize: paging.size,
            //当前页数
            current: paging.currentPage,
            //数据总数
            total: paging.total,
            //pageSize 变化的回调
            onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
            //页码改变的回调，参数是改变后的页码及每页条数
            onChange: (current) => changePage(current),
        }
        //改变每页条数
        const changePageSize = (pageSizeFun, current) => {
            const parames = {
                currentPage: current,
                size: pageSizeFun,
                ...selectData
            }
            listFun(parames);
        }
        //改变页数
        const changePage = (current) => {
            const parames = {
                currentPage: current,
                size: paging.size,
                ...selectData
            }
            listFun(parames);
        }
    const columns = [
        {
            title: '序号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '车牌号',
            dataIndex: 'carNo'
        },
        {
            title: '进场时间',
            dataIndex: 'approachDate'
        },
        {
            title: '入场图片',
            dataIndex: 'approachImage',
            render: text =>     <Image
            width={200}
            src={text}
          />
        },
        {
            title: '离场时间',
            dataIndex: 'leaveDate'
        },
        {
            title: '离场图片',
            dataIndex: 'leaveImage',
            render: text => <Image
            width={200}
            src={text}
          />
        }
    ];
    return <ImportAndExportListAll>
        <PageHeader
            className="site-page-header"
            title="进出口统计列表"
            extra={[
                <Button key="1" type="primary">
                    添加白名单
                </Button>,
            ]}
        />
        <SelectModules 
            setSelectData = {setSelectData}
            listFun = {listFun}
        />
        <Table 
            columns={columns} 
            dataSource={listData} 
            rowKey='id' 
            pagination={pagination} 
            loading = {tableLoading}
        />
    </ImportAndExportListAll>
}

export default ImportAndExportList